<link rel="stylesheet" href="<%= basePath%>/lib/sui.min.css">
<link rel="stylesheet" href="<%= basePath%>/lib/sui-append.min.css">
<link rel="stylesheet" href="<%= basePath%>/public/iconfont/iconfont.css">
<link rel="stylesheet" href="<%= basePath%>/public/css/style.css">
<link rel="stylesheet" href="<%= basePath%>/modules/student/css/style.css">

<script type="application/javascript" src="<%= basePath%>/lib/jquery.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/lib/sui.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/public/js/util.js"></script>

<script>
    $('#newStrip').on('okHide', function(e){console.log('okHide')});
    $('#newStrip').on('okHidden', function(e){console.log('okHidden')});
    $('#newStrip').on('cancelHide', function(e){console.log('cancelHide')});
    $('#newStrip').on('cancelHidden', function(e){console.log('cancelHidden')});
    $('#leave-date1 input').datepicker({size:"small"});
    $('#leave-date2 input').datepicker({size:"small"});
</script>

<div class="body_scroll">
    <div class="frame-content">
        <ul class="info_list">
            <li class="li_info">
                <span class="iconfont" style="color: #5396f1; float: left; margin-top: 3px">&#xe61f;</span>
                <form class="sui-form form-horizontal" style="float: left; margin: 3px 0 0 0">
                    <div class="control-group" style="margin: 0">
                        <span style="font-size: 14px">&nbsp;日期：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" class="input-start-time date_input_top" id="search_date_from">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                        <span style="font-size: 14px;"> 至：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" class="input-end-time date_input_top" id="search_date_to">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                    </div>
                </form>
                <span style="font-size: 14px; margin-left: 20px">&nbsp;&nbsp;状态：</span>
                        <span class="sui-dropdown dropdown-bordered table_header select">
                            <span class="dropdown-inner">
                            <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="status_select">
                                <input type="hidden" value="0" id="search_status_input"><i class="caret"></i><span>全部</span>
                            </a>
                            <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-status">
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="1">出勤</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-2">迟到</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-3">早退</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="3">请假</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-1">旷课</a></li>
                            </ul>
                            </span>
                        </span>
                <a class="btn-search sui-btn btn-primary search_button" style="margin-left: 26px">查询</a>
                <div style="clear:both;"></div>
            </li>
            <li class="li_footer">
                <div class="table_content_div">
                    <table class="sui-table table-zebra attend_table table-bordered">
                        <tbody>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th colspan="2">上午</th>
                            <th colspan="2">下午</th>
                            <th colspan="2">晚上</th>
                            <th>在校轨迹</th>
                        </tr>
                        <%
                        var tracksIndex = 0;
                                attendances.forEach(function(attendance) { %>
                        <tr>
                            <td><%=student.sid%></td>
                            <td><%=student.name%></td>
                            <% attendance.values.forEach(function(value) { %>
                            <td><%=AttendanceDescriptions.get(value.enterStatus)%></td>
                            <td><%=AttendanceDescriptions.get(value.exitStatus)%></td>
                            <% }); %>
                            <td class="attend_table_detail" id="<%= attendance.id%>" data-id="<%=attendance.id%>" onclick="tableDetailButtonClicked(event)">详细 <i class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>
                        </tr>
                        <%var tracks = tracksList[tracksIndex]
                        if ( tracks ) {
                        %>
                        <tr data-id="attend_detail_area<%= attendance.id%>" class="table_detail_content_hide">
                            <td colspan="9" data-id="attend_detail_content<%= attendance.id%>" class="table_detail_background" style="height: 0; padding: 0; line-height: 0">
                                <% if (tracks.length == 0) {%>
                                <p style="font-size: 16px; text-align: center; margin-top: 10px; margin-bottom: 10px">暂无在校轨迹</p>
                                <% } %>
                                <%
                                for ( var trackIndex in tracks ) {
                                    var track = tracks[trackIndex];
                                if ( trackIndex == 0 ) {
                                %>
                                <div style="width: 100%; margin-top: 10px">
                                    <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                                        <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;right: -6px;position: absolute"></div>
                                        <p style="margin: 0">
                            <span style="float: right; margin-right: 20px; margin-top: -3px">
                                <%=lib.util.formatTime(track.time)%>
                            </span>
                                <span style="float: right; margin-right: 21px;margin-top: -3px">
                                    <%=track.description%>
                                </span>
                                        </p>
                                        <div style="clear: both;"></div>
                                    </div>
                                </div>
                                <div style="width: 100%">
                                    <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;height: 18px">
                                    </div>
                                </div>
                                <%}
                                else if ( trackIndex == tracks.length - 1 ) {
                                %>
                                <div style="width: 100%">
                                    <div style="width: 50%;border-right: 1px solid #5396F1;margin-right: 50%;height: 18px">
                                    </div>
                                </div>
                                <div style="width: 100%; margin-bottom: 15px">
                                    <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;position: relative">
                                        <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;bottom:0;left: -6px;position: absolute"></div>
                                        <p style="margin: 0">
                                <span style="float: left; margin-left: 20px;margin-bottom: -3px;">
                                    <%=lib.util.formatTime(track.time)%>
                                </span>
                                <span style="float: left;margin-left: 21px;margin-bottom: -3px">
                                    <%=track.description%>
                                </span>
                                        </p>
                                        <div style="clear: both"></div>
                                    </div>
                                </div>
                                <%}
                                else if ( trackIndex % 2 == 1 ) {
                                %>
                                <div style="width: 100%">
                                    <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                                        <p style="margin: 0">
                                            <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                <span style="float: right; margin-right: 11px;">
                                    <%=lib.util.formatTime(track.time)%>
                                </span>
                                <span style="float: right; margin-right: 21px;">
                                    <%=track.description%>
                                </span>
                                        </p>
                                        <div style="clear: both"></div>
                                    </div>
                                </div>
                                <%}
                                else {
                                %>
                                <div style="width: 100%">
                                    <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                                        <p style="margin: 0">
                                            <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                <span style="float: left; margin-left: 11px">
                                    <%=lib.util.formatTime(track.time)%>
                                </span>
                                <span style="float: left;margin-left: 21px">
                                    <%=track.description%>
                                </span>
                                        </p>
                                        <div style="clear: both"></div>
                                    </div>
                                </div>
                                <%}%>
                                <%}%>
                            </td>
                        </tr>
                        <%
                        }
                            tracksIndex ++;
                        }); %>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
</div>

<script>
    var AbsenceApplies = JSON.parse('<%=JSON.stringify(absenceApplies.map(apply => apply.toObject()));%>'.replace(new RegExp(/&#34;/g), '"'));
    console.log(AbsenceApplies);
</script>
<script type="application/javascript" src="<%= basePath%>/modules/student/js/student.js"></script>